//react中声明组件的方式:类组件、函数组件
//区别:类组件适合做比较复杂的功能,有生命周期,有数据状态,有this...
//函数组件适合做简单的页面展示,没有生命周期,没有数据状态,没有this,性能好
import React, { Component } from 'react'
import './Coma.css'

export default class ComA extends Component {
    constructor() {
        super();
        this.state = {
            age:18
        }
        //适用于函数多次调用,可以在构造函数中统一处理
        this.showClick = this.showClick.bind(this)
    }
    showClick() {
        console.log(this.state.age);
    }
    showArg(arg1,arg2) {
        console.log(arg1);
        console.log(arg2);
    }
    showEvent(e){
        console.log(e);
    }
    showAll(e,val){
        console.log(e);
        console.log(val);
    }
    showMenu(e){
        e.preventdefault()
        console.log('你右键了');
    }
    clickDiv(val){
        console.log(val);
    }
    render() {
        return (
            <div>
                <p>这是我的第一个类组件,我永远{this.state.age}岁</p>
                <button onClick={this.showClick}>点我就让你嘿嘿嘿</button>
                <br />
                <button onClick={()=>this.showClick()}>点我就让你嘿嘿嘿</button>
                <hr />
                <button onClick={this.showArg.bind(this,666,this.state.age)}>ES5</button>
                <br />
                <button onClick={()=>this.showArg(666,this.state.age)}>ES6</button>
                <br />
                <button onClick={this.showEvent.bind(this)}>隐式传递</button>
                <hr />
                <button onClick={(e)=>this.showEvent(e)}>显式传递</button>
                <br />
                <button onClick={this.showAll.bind(this,this.state)}>隐式传递</button>
                <hr />
                <button onClick={(e)=>this.showAll(this,this.state,e)}>显式传递</button>
                <br />
                <input type="text" value={this.state.age} onChange={(e)=>this.showEvent(e)} />
                <button onContextMenu={(e)=>this.showMenu(e)}>右键</button>
                <div className="class1" onClickCapture={()=>this.clickDiv('class1')}>
                <div className="class2" onClickCapture={()=>this.clickDiv('class2')}>
                <div className="class3" onClickCapture={()=>this.clickDiv('class3')}>
                </div>
                </div>
                </div>
             </div>
        )
    }
}

